<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Form with Notification</title>
<style>
/* Notification styles */
.notification {
  display: none;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("myForm").addEventListener("submit", function(event) {
        // Prevent default form submission
        event.preventDefault();
        
        // Display notification
        var notification = document.getElementById("notification");
        notification.style.display = "block";
        
        // Simulate submission delay (replace this with actual submission logic)
        setTimeout(function() {
            // Hide notification
            notification.style.display = "none";
            
            // Submit form
            document.getElementById("myForm").submit();
        }, 2000); // Change 2000 to your desired delay in milliseconds
    });
});
</script>
</head>
<body>

<form id="myForm" action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <!-- Submit button -->
    <button type="submit">Submit</button>
</form>

<!-- Notification -->
<div id="notification" class="notification">Form submitted!</div>

</body>
</html>
